.container {
    display: grid;
    /* 定义列，1 100px宽，以此类推 */
    /* 自定义网格线名称 */
    grid-template-columns: [a] auto [b] 150px [c] 200px [d];
    /* 定义行，第一行100px高 */
    grid-template-rows: 100px 200px;
}

.item {
    width: 50px;
    height: 50px;
    background-color: rgb(153, 70, 70);
}

.c1 {
    display: grid;
    /* grid-template-columns: repeat(5, 1fr); */
    grid-template-columns: [x] 100px [z] 100px [b] 100px [four] 100px [a];
    grid-template-rows: repeat(3, 100px);
    /* grid-gap: 10px 20px; */
    /* 主要是处理元素在网格里面的对齐 */
    /* justify-items: center;
    align-items: end; */
    width: 1000px;
    height: 800px;
    place-items: end center;
    /* 主要是处理网格在容器里面的对齐方式 */
    /* justify-content: space-evenly;
    align-content: space-around; */
    border: 1px solid red;
}

.i1 {
    width: 50px;
    height: 50px;
    background-color: rgb(70, 153, 98);
}

.i1:first-child {
    width: 180px;
    height: 180px;
    background-color: rgb(207, 44, 44);
    /* grid-column-start: z;
    grid-column-end: four; */
    /* grid-column: z / four; */
    /* grid-row-start: 2;
    grid-row-end: 4; */
    /* grid-row: 2 / 4; */
    grid-area: 2 / z / 4 / four
}

.c2 {
    margin: 100px auto;
    width: 1200px;
    height: 800px;
    border: 1px solid red;
    display: grid;
    grid-template-rows: 80px 600px 80px;
    grid-template-columns: 1000px 200px;
    grid-template-areas: "h h" "le ri" "foo foo";
}

.header {
    grid-area: h;
    background-color: rgb(65, 55, 55);
}

.left {
    background-color: rgb(23, 158, 41);
    grid-area: le;
}

.right {
    grid-area: ri;
    background-color: rgb(33, 36, 219);
}

.footer {
    grid-area: foo;
    background-color: rgb(240, 243, 71);
}